<template>
  <div class="container">
    <div class="forget-div">
      <div class="step-div">
        <el-steps :active="active=2" finish-status="success">
          <el-step title="账户确认">
            <el-input placeholder="请输入邮箱"></el-input>
          </el-step>
          <el-step title="重置密码"></el-step>
          <el-step title="重置成功"></el-step>
        </el-steps>
      </div>
      <div class="form-div">
        <span>重置成功，{{countdown}} 秒后自动跳转到
          <a>
            <router-link :to="{path: '/login'}">
              登录
            </router-link>
          </a>
          页面</span>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>


<script>

export default {
  data() {
    return {
      countdown: 5
    }
  },
  created() {
    //每隔一秒执行定时器
    let timer=setInterval(() => {
      if(this.countdown > 0){
        this.countdown--;
      }else{
        this.next()
      }
    },1000);

  },
  methods: {
    init() {

    },
    next() {
      this.$router.push({path: '/login'})
    },
  }
}
</script>


<style scoped>
a {
  text-decoration: none;
}
a :hover  {
  color: #01A7F0;
}
.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(../../../assets/img/login-bg.png);
  background-size: 100%;
}
.forget-div {
  position: absolute;
  left: 27%;
  top: 15%;
  width: 730px;
  height: 530px;
  border-radius: 28px;
  box-shadow:4px 4px 15px #6d6a6a;
  background: rgba(250, 250, 250, 0.98);
}
.step-div {
  width: 440px;
  position: absolute;
  top: 8%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.form-div {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.next-btn {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.el-button {
  width: 200px;
}
.el-input {
  width: 360px;
}

</style>